<template>
  <div class="con-box">
     <findPassword></findPassword>
      <div class="con">
            <div class="progress-con">
                <div class="progress">
                    <div class="line">
                        <p class="circle1 active">
                            <span class="num">1</span>
                            <span class="text">手机验证</span>
                        </p>
                        <p class="circle2 active">
                            <span class="num">2</span>
                            <span class="text">设置新密码</span>
                        </p>
                        <p class="circle3">
                            <span class="num">3</span>
                            <span class="text">设置成功</span>
                        </p>
                   </div>
                   <div class="line-active" :style="{width:((1/3)*1000)*partNum+'px'}"></div>
                </div>
            </div>
            <div class="form">
            
                <el-form label-width="128px" class="showSecond" :rules="rules" :model="ruleForm" ref="ruleForm" status-icon>
                    <el-row :gutter="41" class='input-hidden'>
                        <el-col :span="10">
                            <el-input name="old-pwd" type="password" disabled ></el-input>
                            <el-input name="old-pwd" type="password" disabled ></el-input>
                        </el-col>
                    </el-row>
                     <el-row :gutter="20">
                            <el-col>
                                <el-form-item label="输入新密码" prop="password" >
                                    <el-input type="password" v-model="ruleForm.password" placeholder="请输入新密码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col>
                                <el-form-item label="再次输入新密码" prop="checkPass">
                                    <el-input type="password" v-model="ruleForm.checkPass" placeholder="请再次输入新密码"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col>
                              <el-button type="primary" @click="next('ruleForm')" class="next">下一步</el-button>
                            </el-col>
                        </el-row>
                  
                </el-form>
               
            </div>
      </div>
  </div>
</template>
<script>
import {resetPassword, forgotPassword} from 'api/login';
import sha256 from 'sha256';

export default {
    data() {
        let validatePass = (rule, value, callback) => {
            const passowrRule=/^[A-Za-z0-9]*$/;
            if (value === '') {
                callback(new Error('请输入密码'));
            } else {
                if ((!(value.length<=16&&value.length>=6))||(!(passowrRule.test(value)))) {
                    callback(new Error('密码长度为6到16个字符，仅支持数字和字母'))
                }
            }
            callback();
        };
        let validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.password) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            partNum: 2,
            ruleForm: {
                password: '',
                checkPass: ''
            },
            rules: {
                password: [
                   {validator: validatePass, trigger: 'blur'}
                ],
                checkPass: [
                    { validator: validatePass2, trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        
        // //console.log(this.$route.query.phone, 'this.$route.query.phone')
    },
    methods: {
        next(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let loginStatus=this.$route.query.loginStatus;
                    let phone=this.$route.query.phone;
                    let password=this.ruleForm.password;// 新密码
                    let confirmPassword=this.ruleForm.checkPass;// 确认新密码
                    let captcha = this.$route.query.gotCode;// 验证码
                    if (loginStatus=='1') {// 前台
                        forgotPassword(phone, captcha, sha256(password)).then(res => {
                            this.$router.push({path: '/resetSuccess'});
                        });
                    }
                    if (loginStatus=='2') {// 后台
                        resetPassword(phone, sha256(password), sha256(confirmPassword), captcha).then(res => {
                            this.$router.push({path: '/resetSuccess'});
                        });
                    }
                }
            });
        }
    }
}
</script>
<style lang="scss" scoped>
.input-hidden{
    visibility: hidden;
    position: absolute;
    z-index: -1;
}
.con-box{
    width:100%;
    height: 100%;
    .con{
        padding-top:50px;
         margin:0 auto;
         width: 1000px;
         .progress-con{
             position: relative;
            .progress{
                position: absolute;
                top:0px;
                left:0px;
                    .line{
                        width:1000px;
                        height: 6px;
                        background: #dddddd;
                        border-radius: 3px;
                        position: relative;
                        p{
                            display:block;
                            width:333px;
                            text-align: center;
                            float: left;
                            height:6px;
                            background: #dddddd;
                            border-radius: 3px;
                            text-align: center;
                            z-index:10;
                             .num{
                                display: inline-block;
                                height: 30px;
                                line-height: 30px;
                                width:30px;
                                border-radius: 15px;
                                background: #dddddd;
                                color:#fff;
                                font-size:14px;
                                text-align: center;
                                position: relative;
                                top:-14px;
                                z-index:30;
                             }
                            .text{
                                font-size:17px;
                                text-align: center;
                                color:#666;
                                height: 30px;
                                line-height: 30px;
                                display:block;
                            }
                        }
                        .active{
                             .num{
                                  background: #ff5e2c;
                             }
                        }
                    }
                    .line-active{
                        height: 6px;
                        background: #ff5e2c;
                        border-radius: 3px;
                        position: absolute;
                        top:0px;
                        z-index: 2;
                    }
            }
         }     
        .form{
            margin:0 auto;
            width: 530px;
            margin-top:160px;
            .el-form-item__label{
                font-size:17px !important;
            }
            .el-row{
                margin:20px 0 40px;
            }
            .showSecond{
                .next{
                     margin-left:128px;
                }
            }
        }
    }
}
</style>
